<template>
    <div style="margin-top: -55px">
        <el-container class="main">
            <el-aside :width="tabWidth+'px'">
                <div>
                    <div class="isClossTab" @click="isClossTabFun">
                        <i :class="isCollapse?'el-icon-d-arrow-right':'el-icon-d-arrow-left'" ></i>
                    </div>
                    <el-menu :class="'menu'" default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
                         :collapse="isCollapse" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
                        <el-menu-item index="1">
                            <i class="el-icon-user"></i>
                            <span slot="title"><router-link style="text-decoration:none;color: white" to="/BookUser">用户管理</router-link></span>
                        </el-menu-item>
                        <el-menu-item index="2">
                            <i class="el-icon-document"></i>
                            <span slot="title"><router-link style="text-decoration:none;color: white" to="/BookNove">小说管理</router-link></span>
                        </el-menu-item>
                        <el-menu-item index="3">
                            <i class="el-icon-menu"></i>
                            <span slot="title"><router-link style="text-decoration:none;color: white" to="/BookCategory">分类信息</router-link></span>
                        </el-menu-item>
                    </el-menu>
                </div>
            </el-aside>
            <el-container>
                <el-header class="main-header">
                    <el-dropdown>
                        <span class="el-dropdown-link">
                            <img src="" alt="">
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item><el-button @click="logout">退出登录</el-button></el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                    <span style="color: white;font-size: 30px;">纵横中文后台管理</span>
                </el-header>
                <el-main>
                    <div>
                        <router-view></router-view>
                    </div>
                </el-main>
                <el-footer class="main-footer" height="50px">
                    <p>@纵横中文.ZHZW</p>
                </el-footer>
            </el-container>
        </el-container>
    </div>
</template>

<script>
    export default {
        name: "Main",
        data() {
            return {
                isCollapse: false,
                tabWidth: 200,
                test1: 1,
                intelval: null,
            };
        },
        methods: {
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },

            isClossTabFun(){
                clearInterval(this.intelval);
                if(!this.isCollapse){
                    this.intelval = setInterval(()=>{
                        if(this.tabWidth<= 64)
                            clearInterval(this.intelval);
                        this.tabWidth -= 1;
                    }, 1);
                }else{
                    this.tabWidth = 200;
                }
                this.isCollapse = !this.isCollapse;
            },
            logout(){
                this.$router.replace("/");
                sessionStorage.clear();
                localStorage.clear();
                this.$notify({
                    title: '成功退出',
                    message: '',
                    type: 'success'
                });
            }
        }
    }
</script>

<style scoped>
    .main {
        height: 100vh;
        min-width: 800px;
        min-height: 600px;
        overflow: hidden;
    }
    aside {
        overflow: visible;
        height: 100%;
        background-color: #545c64;
        color:  #FFF;
    }
    .isClossTab{
        width: 100%;
        height: 60px;
        cursor: pointer;
        font-size: 25px;
        text-align: center;
        line-height: 60px;
        font-weight: bold;
        border-right: 1px solid #807c7c;
        box-sizing: border-box;
    }
    .menu {
        width: 100%;
        border-right:0;
    }
    .main-header {
        background-color: #545c64;
        color: #FFF;
    }
    .el-dropdown{
        cursor: pointer;
        float: right;
    }
    .el-dropdown-link{}

    img{
        /*$imgMargin: (($header-height - 50)/2);*/
        display:inline-block;
        width:50px;
        height: 50px;
        border-radius: 25px;
        background-color: #FFF;
        /*margin-top: $imgMargin;*/
    }
    .crumbs {
        margin-bottom: 20px;
    }

    .main-footer{
        text-align: center;
        background-color: #545c64;
        color: #FFF;
        line-height: 50px;
    }
</style>
